liff.init({
	liffId: '1656768816-jVVnmEgq', // Use own liffId
//	withLoginOnExternalBrowser: true // Enable automatic login process
}).then(() => {
	$(document).ready(() => {
		let div = document.createElement('DIV');
		$(div).attr({id: 'map'}).height(document.documentElement.clientHeight);
		$('BODY').append(div);

		let map = L.map('map', {boxZoom: false, doubleClickZoom: false, dragging: false, minZoom: 17, maxZoom: 19});
		let openStreetMapHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <A href="https://www.openstreetmap.org/copyright">OpenStreetMap</A> contributors, Tiles style by <A href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</A> hosted by <A href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</A>'
		}).addTo(map);
		map.on('locationfound', (event) => {
			let radius = event.accuracy / 2;
			let latlng = event.latlng;
			let marker = L.
				marker(latlng).
				addTo(map).
				bindPopup((layer) => {
					let container = document.createElement('DIV');
					$(container).addClass('btn-group');

					let checkIn = document.createElement('BUTTON');
					let checkOut = document.createElement('BUTTON');
					$(container).
						append(
							$(checkIn).
								attr({
									class: 'btn btn-outline-primary'
								}).
								html('上班').
								click(() => {
									liff.
										sendMessages([
											{
												'type': 'text',
												'text': `$ 上班\n${latlng.lat} ${latlng.lng}`,
												'emojis':[
													{
														'index': 0,
														'productId': '5ac21e6c040ab15980c9b444',
														"emojiId": '001'
													}
												]
											},
											{
												"type": "location",
												"title": "title",
												"address": "上班",
												"latitude": latlng.lat,
												"longitude": latlng.lng
											}
										]);
									liff.closeWindow();
								})
						).
						append(
							$(checkOut).
								attr({
									class: 'btn btn-outline-primary'
								}).
								html('下班').
								click(() => {
									liff.
										sendMessages([
											{
												'type': 'text',
												'text': `$ 下班\n${latlng.lat} ${latlng.lng}`,
												'emojis': [
													{
														'index': 0,
														'productId': '5ac21e6c040ab15980c9b444',
														"emojiId": '005'
													}
												]
											},
											{
												"type": "location",
												"title": "title",
												"address": "下班",
												"latitude": latlng.lat,
												"longitude": latlng.lng
											}
										]);
									liff.closeWindow();
								})
						);
					return container;
				}).
				openPopup();
			let circle = L.
				circle(latlng, radius).
				addTo(map);
		});
		map.locate({setView: true});
	});
});
